<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        body,p{margin:0;padding:0;}
        body{color:#333;font:12px/1.5 Thoma;padding-top:10px;}
        #outer{width:300px;margin:0 auto;}
        p{margin-bottom:10px;}
        button{margin-right:5px;}
        label{width:5em;display:inline-block;text-align:right;}
        input{padding:3px;font-family:inherit;border:1px solid #ccc;}
        #div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
    </style>
</head>
<body>
<div id="outer">
    <p><label>属性名:</label><input type="text" value="background" /></p>
    <p><label>属性值:</label><input type="text" value="blue" /></p>
    <p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果</div>
<script type="text/javascript">

    //知识点1:
    //删除元素的style属性
    //元素.removeAttribute("style");

    function modify(ele,key,val){
        ele.style[key] = val;
    }
    window.onload = function(){
        var inputs = document.getElementsByTagName("input");
        var div1 =  document.getElementById("div1");
        var button = document.getElementsByTagName("button");
        button[0].onclick = function(){
            modify(div1,inputs[0].value,inputs[1].value);
        }

        button[1].onclick = function(){
            div1.removeAttribute("style");
        }
    };
</script>
</body>
</html>